<template>
    <h2>房型信息列表</h2>
    <table class="table table-bordered">
        <thead>
            <tr>
                <td>房型名称</td>
                <td>门市价格</td>
                <td>房间大小</td>
                <td>房间号</td>
                <td>房型状态</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in info">
                <td>{{ item.typename }}</td>
                <td>￥{{ item.price.toFixed(2) }}</td>
                <td>{{ item.size }}平米</td>
                <td>{{ item.numname }}</td>
                <td>{{ item.tState?"启用":"禁用" }}</td>
                <td>
                    <a href="#" @click="Del(item.typeid)">删除</a>
                    <a href="#" @click="Upd(item.typeid)" style="margin-left: 10px;">修改</a>
                </td>
            </tr>
        </tbody>
    </table>

共有{{ page.pagecount }}页,当前是第{{ page.pageindex }}页,共有{{ page.totalcount }}行,每页{{ page.pagesize }}行
<br/>
<a href="#" @click="pageshow(1)">首页</a>
<a href="#" @click="pageshow(page.pageindex-1)" style="margin-left: 10px;">上一页</a>
<a href="#" @click="pageshow(page.pageindex+1)" style="margin-left: 10px;">下一页</a>
<a href="#" @click="pageshow(page.pagecount)" style="margin-left: 10px;">尾页</a>
<select v-model="page.pagesize" @change="pagerow">
    <option :value="2">2行每页</option>
    <option :value="3">3行每页</option>
    <option :value="5">5行每页</option>
</select>
<input type="text" style="width: 50px;" v-model="jump"/>
<input type="button" value="跳转" @click="pagejump"/>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
import axios from 'axios'
import {useRouter} from 'vue-router';
const router=useRouter()

const info=ref([{
    typeid:0,
    typename:'',
    price:0,
    size:0,
    tState:true,
    numname:''
}])

onMounted(()=>{
    RoomTypeShow()
})
const page=ref({
    pageindex:1,
    pagesize:2,
    pagecount:0,
    totalcount:0
})
const RoomTypeShow=()=>{
    axios.get('https://localhost:7173/api/Room/RoomTypeShow',{
        params:{
            pageindex:page.value.pageindex,
            pagesize:page.value.pagesize
        }
    })
    .then(res=>{
        info.value=res.data.pdata
        page.value.pagecount=res.data.pagecount
        page.value.totalcount=res.data.totalcount
    })
}

//翻页
const pageshow=(index:number)=>{
    if(index<1){
        alert('当前已经是首页了')
        return
    }
    if(index>page.value.pagecount){
        alert('当前已经是尾页了')
        return
    }
    page.value.pageindex=index
    RoomTypeShow()
}
//更改每页行数
const pagerow=()=>{
    page.value.pageindex=1
    RoomTypeShow()
}

//跳转页码
const jump=ref("")
const pagejump=()=>{
    if(!jump.value){
        alert('页码值不能为空')
        return
    }
    if(isNaN(Number(jump.value))){
        alert('页码值只能是数字')
        return
    }
    if(Number(jump.value)<1){
        alert('页码值不能小于1')
        return
    }
    if(Number(jump.value)>page.value.pagecount){
        alert('页码值不能大于总页码')
        return
    }
    page.value.pageindex=Number(jump.value)
    RoomTypeShow()
}
//删除
const Del=(id:number)=>{
    if(confirm('确认删除吗?')){
        axios.delete('https://localhost:7173/api/Room/RoomTypeDel',{
        params:{
            id:id
        }
    })
    .then(res=>{
        if(res.data>0){
            alert('删除成功')
            pagerow()
        }
        else{
            alert('删除失败')
        }
    })
    }
}
//跳转修改
const Upd=(id:number)=>{
    router.push({
        name:'RoomTypeUpd',
        params:{
            id:id
        }
    })
}



</script>